.wap {
  overflow: auto;
  [class*=" el-icon-"], [class^=el-icon-] {
    font-size: .3rem;
  }

  .tips {
    text-align: center;
    color: @color-text;
    font-size: .26rem;
    margin: .4rem 0;
  }

  .full-button {
    display: block;
    margin: 1rem 0;
    box-sizing: border-box;
    height: .8rem;
    border-radius: 4px;
    border: none;
    width: 100%;
    &.primary {
      color: #fff;
      background: #0B5FD5;
    }
  }

  .label {
    border-radius: 3px;
    padding: .08rem .18rem;
    font-size: .2rem;
    color: #fff;
    background-color: #7F8FA4;

    &.success {
      background-color: @color-success;
    }
  }

  .spacer-line {
    border-bottom: .2rem solid #efefef;
  }

  .complain-details-warp {
    .base-info {
      padding: .2rem;
      .title {
        font-size: .36rem;
        margin-bottom: .2rem;
        word-break: break-all;
      }
    }

    .key-values {
      .key-value-item {
        display: flex;
        padding: .1rem .2rem;
        border-bottom: 1px solid #f2f2f2;
        .key, .value, .operate {
          line-height: .6rem;
        }
        .key {
          width: 1.8rem;
          word-break: break-word;

          &.title {
            position: relative;
            width: auto;
            padding-left: .1rem;

            &:before {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -4px;
              width: 2px;
              height: 10px;
              background-color: @color-primary-light;
            }
          }
        }

        .value {
          flex: 1;
          flex-shrink: 0;
          text-align: right;
          word-break: break-all;
        }

        .operate {
          width: auto;
          margin-left: .2rem;
        }
      }
    }
  }

  .el-message-box {
    width: 90%;
  }


  .drawer-form {
    .drawer-form-item {
      margin-top: .2rem;
      //justify-content: space-between;
      width: 100%;

      .key {
        text-align: left;
        width: 2rem;

        &.required::before {
          display: inline-block;
          width: 10px;
          content: "*";
          color: @color-danger;
          //opacity: 0;
          margin-right: .1rem;
        }

        &.required::before {
          opacity: 1;
        }
      }

      .value {
        flex: 1;
      }

      textarea {
        margin-top: .1rem;
        width: 100%;
        //margin-left: 10px;
        box-sizing: border-box;
        height: 2.5rem;
        border: 1px solid #efefef;
      }
    }

    .full-button {
      margin: 0;
    }
  }

  .form {
    .form-item {
      padding: .2rem;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;

      &:first-child {
        border-top: 1px solid #f2f2f2;
      }

      .key {
        width: 2.8rem;

        word-break: break-word;
        //line-height: 1.2;

        &::before {
          content: "*";
          color: red;
          margin-right: .08rem;
          opacity: 0;
        }

        &.required::before {
          opacity: 1;
        }
      }

      .value {
        flex: 1;
        font-size: .26rem;
        //text-align: right;

        input,
        textarea {
          font-size: .26rem;
          line-height: 0.4rem;
          border: none;
          height: 100%;
          width: 100%;
          outline: none;
          padding: 0;
        }

        .placeholder {
          line-height: 0.4rem;
          display: block;
          width: 100%;
          text-align: left;
          font-size: 13.3333px;
          color: #757575;
        }
      }
    }
  }
}

